<template>
  <div
    v-loading="loading"
    class="monthPlanAdd"
  >
    <b-table
      ref="table"
      :export-config=" {use: true,select: '物资明细选中', all: '物资明细全部'}"
      :columns="columns"
      bordered
      :scroll="{ x: 1300 }"
      :request="loadData"
    >
      <span
        slot="index"
        slot-scope="text, record, index"
      >{{ index + 1 }}</span>
      <template
        v-for="col in ['number', 'settleAmount', 'sumSettle','controlAmount','sumTotal',
                       'sumSettleControlDiff','sumSettleControl','sumUnitPoint','remark']"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :key="col">
          <template v-if="index === editingIndex">
            <b-input
              v-if="col === 'remark'"
              v-model="record[col]"
            />
            <b-input-number
              v-else-if="col === 'number'"
              v-model="record[col]"
              v-check="col"
              :precision="3"
              :disabled="col === 'sumSettle' || col === 'sumTotal' || col === 'sumSettleControlDiff'
                || col === 'sumSettleControl' || col === 'sumUnitPoint'"
              @change="e => handleChange(e, record, col)"
            />
            <b-input-number
              v-else
              v-model="record[col]"
              v-check="col"
              :precision="2"
              :disabled="col === 'sumSettle' || col === 'sumTotal' || col === 'sumSettleControlDiff'
                || col === 'sumSettleControl' || col === 'sumUnitPoint'"
              @change="e => handleChange(e, record, col)"
            />
          </template>
          <template v-else>
            {{ col === 'analysisIdentify' ? record.analysisIdentifyStr : text }}
          </template>
        </div>
      </template>
      <template
        slot="operation"
        slot-scope="text, record, index"
      >
        <div class="editable-row-operations">
          <template v-if="index === editingIndex">
            <a @click="save(record)">保存</a>
            <a @click="cancel(record)">取消</a>
          </template>
          <template v-else>
            <a
              :disabled="editingIndex !== null || state === 3"
              @click="editingIndex = index"
            >编辑</a>
          </template>
        </div>
      </template>
    </b-table>
  </div>
</template>
<script>
import { selectOption } from '@/api/material/goods/goods'
import { materialsList } from '@/api/material/procurement/apply'
import { reviewMaterialsEdit } from '@/api/material/procurement/review'
import { columns } from './insideModel'
import { planDetailEdit } from '@/api/material/procurement/plan'

const data = []
export default {
	name:'a'+Date.now(),
    name: 'RebarPlan',
    props: {
        state: {
            type: Number
        },
        id: {
            type: String
        },
        applyId: {
            type: String
        }
    },
    data() {
        this.cacheData = data.map(item => ({ ...item }))
        return {
            loading: false,
            queryParam: {},
            columns: columns,
            data: this.tableData,
            optionArr: [],
            rules: {
                number: { message: '数量不能为空', trigger: 'blur' },
                settleAmount: { message: '发包人结算单价不能为空', trigger: 'blur' },
                controlAmount: { message: '招标控制单价不能为空', trigger: 'blur' }
            },

            checkKeys: new Map(),
            loadData: params => materialsList(Object.assign(params, { purchaseApplyId: this.applyId })),
            editingIndex: null
        }
    },
    watch: {},
    mounted: function() {
        this.getOption()
        if (this.state === 3) {
            this.editingKey = true
        }
    },
    directives: {
        check: {
            inserted(el, binding, vNode) {
                if (vNode.context.rules[binding.value]) {
                    let rule = vNode.context.rules[binding.value]
                    vNode.context.checkKeys.set(binding.value, rule.message)
                }
            }
        }
    },
    methods: {
        async getOption() {
            let res = await selectOption({ type: 0 })
            if (res.code === this.SUCCESS_CODE) {
                this.optionArr = res.data
            }
        },
        openDailog: function() {
            if (this.editingIndex !== null) {
                this.$noticeWarning('新增前请结束当前操作行')
                return
            }
            this.$refs.detailDialog.open()
        },
        handleChange(value, row, column) {
            // return console.log(value)
            row['sumSettle'] = row['number'] * row['settleAmount']
            row['sumSettle'] = row['sumSettle'].toFixed(6)
            row['sumTotal'] = row['number'] * row['controlAmount']
            row['sumTotal'] = row['sumTotal'].toFixed(6)
            row['sumSettleControlDiff'] = row['settleAmount'] - row['controlAmount']
            row['sumSettleControlDiff'] = row['sumSettleControlDiff'].toFixed(6)
            row['sumSettleControl'] = row['sumSettle'] - row['sumTotal']
            row['sumSettleControl'] = row['sumSettleControl'].toFixed(6)
            row['sumUnitPoint'] = row['sumSettleControl'] / row['sumSettle']
            row['sumUnitPoint'] = row['sumUnitPoint'].toFixed(6)
        },
        async save(row) {
            try {
                this.checkKeys.forEach((value, key) => {
                    if (this.$isEmpty(row[key])) throw new Error(value)
                })
                this.loading = true
                let res = await reviewMaterialsEdit(row)
                if (res.code === this.SUCCESS_CODE) {
                    this.$message.success('编辑成功')
                    this.cancel()
                    this.$emit('getTotal')
                }
                this.loading = false
            } catch (e) {
                this.$noticeWarning(e.message)
            }
        },
        cancel() {
            this.editingIndex = null
            this.$refs.table.getData(null, true)
        }
    }
}
</script>
